<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title>
    <style>
        .img-upload {
            width:  300px;
            height: 500px;
            margin: calc(50vh - 250px) calc(50vw - 150px);
            position: relative;
            border-radius: 8px;  
            box-shadow: 0 0 6px rgba(0,0,0,0.3);
            transition: all 0.33s;
        }
        .img-upload:hover {
            background-color: rgba(0,0,0,0.3);
            transition: all 1s;
        }
        .img-upload-area {
            width:  300px;
            height: 500px;            
        }
        .img-border {
            width: 100px;
            height: 100px;
            margin: 5px;
            position: absolute;
            border-width: 8px;
            border-style: solid;
            border-color: rgba(0,0,0,0.5);            
        }
        .img-border-lt {
            top: 0;
            left: 0;
            border-right: transparent;
            border-bottom: transparent;
            border-top-left-radius: 8px;            
        }
        .img-border-ld {
            bottom: 0;
            left: 0;
            border-right: transparent;
            border-top: transparent;
            border-bottom-left-radius: 8px;               
        }
        .img-border-rt {
            top: 0;
            right: 0;
            border-left: transparent;
            border-bottom: transparent;
            border-top-right-radius: 8px;   
        }
        .img-border-rd {
            bottom: 0;
            right: 0;
            border-left: transparent;
            border-top: transparent;
            border-bottom-right-radius: 8px;               
        }
        .img-upload-flag img {
            width: 80px;
            height: 80px;
            position: absolute;
            left: 110px;
            top: 210px;
        }
    </style>
</head>
<body>
    <div class="img-upload">
        <div class="img-upload-area">
            <div class="img-border img-border-lt"></div>
            <div class="img-border img-border-ld"></div>
            <div class="img-border img-border-rt"></div>
            <div class="img-border img-border-rd"></div>
            <div class="img-upload-flag">
                <img src="file_upload.svg" />
            </div>
        </div>
        <form enctype="multipart/form-data" method="post" action="" style="display:none;">
            <input id="img-file" type="file" accept="image/png, image/jpeg, image/jpg"/>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function() {
            $('#img-file').change(function() {
				var formData = new FormData(); // ??? 不能直接搞$(this).parent() 
				formData.append("file", $(this)[0].files[0]);
                $.ajax({ 
                    url: "/homework-upload/upload-image",
                    data: formData,
                    type: 'POST',
                    cache: false,
                    processData: false,
                    contentType: false, // multipart/form-data
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(err) {
                        console.log("error!");
                    }
                });
                // var e = $(this); console.log({ fileName: e.val(), fileSize: e[0].files[0].size }); 
            });
        
            $('.img-upload-area').click(function() {
                $('#img-file').click();
            });
        }); 
    </script>
</body>
</html>